import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex); //把vuex注入到所有的子组件
import * as api from "../api";
import allRoutes from "../router/allRoutes"; //引入所有的路由配置
import dynamicRoutes from "@/router/dynamicRoutes"; //动态路由
import recursionRoutes from "@/utils/recursionRoutes"; //递归计算用户路由的方法
import router from "../router";

let userInfo = localStorage.getItem("qf-userInfo") || "{}";
export default new Vuex.Store({
  //strict:true,//只是警告一下不要在mutation以外的处理函数中修改state
  //vuex的五大核心
  state: {
    userInfo: JSON.parse(userInfo), //用户信息
    sideMenu: [], //侧边栏菜单
    breadCrumb: [], //面包屑数据
    dialogVisible: false, //控制dialog显示隐藏的值
    dialogTitle: "增加学员信息", //控制dialog的标题
    stuData: [],
    // 表格加载动画控制
    loading: true,
    //编辑的时候,dialog回显的表格数据
    currentRow: {},
    stuTotal: 0, //总条目
    stuPageSize: 10, //每页显示的数量
  }, //状态
  mutations: {
    //表格显示loading动画
    SHOW_LOADING(state) {
      state.loading = true;
    },
    //表格隐藏loading动画
    HIDE_LOADING(state) {
      state.loading = false;
    },
    //设置学员项目管理表格中的数据
    SET_STU_DATA(state, payload) {
      state.stuData = payload.data; //设置学员列表
      state.loading = false; //关闭加载动画
      state.stuTotal = payload.total; //设置学员分页总数
    },
    //显示diglog
    SHOW_DIALOG(state) {
      state.dialogVisible = true;
    },
    //隐藏dialog
    HIDE_DIALOG(state) {
      state.dialogVisible = false;
    },
    //修改dialog标题
    CHANGE_DIALOG_TITLE(state, payload) {
      state.dialogTitle = payload;
    },
    //保存用户信息
    SET_USER_INFO(state, payload) {
      //设置用户信息
      state.userInfo = payload;
    },
    SET_MENULIST(state, payload) {
      //设置菜单
      state.sideMenu = payload;
      // console.log(state.sideMenu)
      //将用户路由动态的添加到router的配置routes中
      //将用户路由添加到dynamicRoutes中的"/"路径那个配置中的children属性中
      let target = dynamicRoutes.find((item) => item.path === "/");
      // console.log(target)
      target.children = payload;
      //要将用户路由动态的添加到我们的项目之中
      // console.log(dynamicRoutes)
      router.addRoutes(dynamicRoutes);
      //核心方法就是router.addRoutes([])
    },
    SET_BREADCRUMB(state, payload) {
      //设置面包屑🍞;
      state.breadCrumb = payload;
    },
    //修改dialog回显数据
    SET_CURRENT_ROW(state, payload) {
      state.currentRow = { ...payload };
    },
  }, //修改状态的方法
  getters: {},
  actions: {
    //获取用户菜单
    async GET_MENULIST({ commit }) {
      console.log("action执行了");
      //用于获取服务器中当前用户的菜单
      let res = await api.getMenulistApi();
      let { menuList } = res.data;
      //使用recursionRoutes方法,计算出用户的路由,提交给mutation
      let userRoutes = recursionRoutes(menuList, allRoutes);
      commit("SET_MENULIST", userRoutes);
    },
    //获取学员列表
    GET_STULIST({ commit }, payload = {}) {
      commit("SHOW_LOADING"); //打开加载动画
      let { page = 1, count = 10, classes = "" } = payload; //解构传递的参数
      api.getStuListApi(page, count, classes).then((res) => {
        commit("SET_STU_DATA", res.data);
      });
    },
  },
  modules: {}, //模块化
});
